@charset "UTF-8";
/**
 * 
 * @authors 447503467@qq.com
 * @date    2016-03-05 22:18:29
 * @version $Id$
 */   
*{ margin: 0; padding: 0}              
ul,li,ol{ list-style: none}       
.form .sfFormBox{background: #fff;     
    *{box-sizing:border-box;}  
    a{color:#666}
    input{margin-bottom: 0!important} 
    input[type="text"]{border:1px solid #ccc;padding:0 5px;height:30px;}
    input[type="checkbox"],input[type="radio"]{vertical-align: -2px;margin-right: 8px;cursor:pointer}
    input[type="number"] { height: 20px; border: 1px solid #ccc; vertical-align: middle; width: 60px; margin: 0 5px; padding: 0 2px; font-size: 12px; color: #666; }
    select{outline:none;border:1px solid #ccc;  border-radius: 0;padding: 0 5px;}
    label{line-height: 1.5;cursor:pointer;display:block}
    .sfFormMain{width: 73%;float: left;  
    .previewItem{
        min-height: 70px;padding-left:20px;padding:10px 0 10px 20px;border:1px solid transparent;position:relative;
        &:hover{cursor: pointer;border:1px dashed #ff9600}
        &:hover .sort-handlerBox{display:block}
        &.active{background: #f5f5f5;.cz{display:block}}
        .readOnly{color: #999;}
        input[type="text"]{font-size:12px;color:#000;height:30px;border:1px solid #ccc;padding:0 5px;}
        input[disabled],select[disabled],textarea[disabled]{cursor:pointer}
        textarea{ height: 60px; border: 1px solid #ccc; box-shadow: none; padding: 2px 5px; width: 300px; resize: none; line-height: 20px; border-radius: 0; color: #999; margin-bottom: 0; }
        .cz { position: absolute; right: 10px; bottom: -10px; border: 1px solid #ccc; background: #fff; width: 44px; text-align: center; height: 20px; line-height: 20px;  display:none;font-size: 0;
        i { width: 20px; text-align: center; color: #94c773;font-size: 14px;vertical-align: -4px; }
        .addBtn{color:#94c773;&:hover{color:#73b548}}
        .delBtn{color:#df4949;&:hover{color:#c82323}}
        }
    }
    .addField { border: 2px dashed #DDD; text-align: center; font-size: 18px; cursor: pointer;height: 70px;line-height: 66px; 
        &:hover{background: #f8f8f8}
    }
    .fieldList{ display: flex; flex-flow: wrap; border: 2px dashed #DDD; margin-top: 10px;}
    .fieldList li { width: 22%; background-color: #eee; box-sizing: border-box; margin: 5px 10px; height: 28px; line-height: 28px; padding-left: 20px; cursor: pointer; }
    }
    .sfForm_editBox{position: absolute;left: 73%;top: 0;background: #f5f5f5; transition: top ease-out 0.25s; margin-left: 10px;
        textarea{border:1px solid #ccc;outline: none; resize: none;padding:2px 5px;margin-bottom: 0;box-shadow: none;width: auto;transition:none;border-radius: 0px; 
        }
        textarea:focus{transition:none;border-color:#ccc;box-shadow: none;outline:none}
        .title{color:#fff;background:#888;height:34px;line-height: 34px;padding: 0 10px;}
        .edit_item{padding: 0 10px;}
        .tit{margin-top: 10px;}
        .write li {margin-top: 5px;}
        input[type="text"]{width:100%;display:block;}
        label{line-height: inherit;}
        .cz{
            a{display:inline-block;padding:10px 4px;cursor: pointer;
            &:first-child{margin-left: 5px;}
            }
        }
        .fieldEdit {border: 1px solid #ccc; padding-bottom: 20px;
        &::before {content: '';width: 10px;height: 10px;background: #f5f5f5;display: block;position: absolute;top: 42px;border-color: transparent transparent #ccc #ccc;border-style: solid;border-width: 1px;left: -7px;transform: rotate(45deg);}}
    } 
    .modalBox { 
        .modal{width: 500px; position: fixed; top: 50px; left: 50%; margin-left: -250px; box-shadow: 0 0 5px #666; background: #fff;z-index: 200}
        .modalBg{position: fixed;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.5);z-index: 100}
        .close { float: right; font-size: 20px; color: #fff; line-height: 26px;cursor: pointer; }
        .modal-header { background: #ff9600; padding: 7px 15px; color: #fff; }
        h3 { font-size: 18px; line-height: 26px; }
        .modal-body { padding: 25px 15px 15px 15px; }
        .modal-body textarea { width: 100%; outline: none; border: 1px solid #ccc; border-radius: 0; margin-top: 10px; height: auto; transition: none; font-size: 12px; color: #666;
        &:focus{transition:none;border-color:#ccc;box-shadow: none;outline:none}
         }
        .modal-footer { background: #eee; padding: 15px; }
        .btn{display:inline;color:#fff;padding:5px 30px}
        .qxBtn{background:#999;border:1px solid #999;margin-left: 20px;}
    }
    .sort-handlerBox { position: absolute; right: 10px; top: 50%; margin-top: -22px; cursor: move;padding:10px;display:none }
    .sort-handler{ background: url("../img/icon_sort.png") no-repeat; display: inline-block; zoom: 1; vertical-align: middle; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; width: 17px; height: 24px; background-position: -30px -438px; }   

}


  
